/**
 * 获取DOM元素和设置导航激活状态
 */
// 获取内容容器元素
let contentBox = document.querySelector(".content")
let now=document.querySelectorAll(".nav-link");
// 判断当前路径是否为'/t'，如果是则给第二个导航链接添加active类
if(location.pathname=='/t'){
    now[1].classList.add("active");
}
/**
 * 获取文章数据并渲染到页面
 */
// 发送GET请求获取所有文章数据
fetch("/getTechnologyArticle")
.then((res)=>{
    // 将响应数据转换为JSON格式
    return res.json()
})
.then((data)=>{
    // 遍历每篇文章数据
    data.forEach((item) => {
       // 创建卡片元素
       var card = document.createElement("a");
       
       card.setAttribute("data-id",item.id);
       // 设置卡片链接地址
       card.setAttribute("href",
        "/page?wd="+card.getAttribute("data-id"));
       // 添加卡片样式类
       card.className = "card";
       // 创建标题元素并设置内容
       var p1 = document.createElement("p");
       // 添加标题样式类
       p1.className="card-title";
       // 设置标题文本内容
       p1.innerHTML = item.title;
       // 创建内容元素并截取前20个字符
       var p2 = document.createElement("p");
       // 添加内容样式类
       p2.className="card-content";
       // 设置内容文本，只显示前20个字符并添加省略号
       p2.innerHTML = item.content.slice(0,40)+"......";
       // 创建信息容器
       var div = document.createElement("div");
       // 添加信息容器样式类
       div.className = "card-info";
       // 创建作者、点赞和收藏的span元素
       var span1=document.createElement("span");
       var span2=document.createElement("span");
       var span3=document.createElement("span");
       // 设置各span元素的文本内容和样式
       // 设置作者文本和样式
       span1.innerText=item.author;
       span1.className="card-author";
       // 设置点赞数文本和样式
       span2.innerText=item.commend;
       span2.className="card-commend";
       // 设置收藏数文本和样式
       span3.innerText=item.fav;
       span1.className="card-author";
       span2.className="card-commend";
       span3.className="card-fav";
       // 将span元素添加到信息容器中
       div.appendChild(span1);
       div.appendChild(span2);
       div.appendChild(span3);
       // 将标题、内容和信息容器添加到卡片中
       card.appendChild(p1);
       card.appendChild(p2);
       card.appendChild(div);
       // 将卡片添加到内容容器中
       contentBox.appendChild(card);

    });
})